<template>
  <div class="pagination">
    <button @click='alterPageNo(pageNo-1)' :disabled="pageNo===1">上一页</button>
    <!-- 加一个判断,当起始页是1的时候，不应该显示前面的1 -->
    <button v-show='startAndEnd.start>1' @click='alterPageNo(1)'>1</button>
    <!-- 加一个判断，如果起始页是2的话，...不应该显示出来 -->
    <span v-show="startAndEnd.start > 2">...</span>
                                                                                        <!-- 当这一页和当前页相等就有类名高亮 -->
    <button v-for="(_,index) in (startAndEnd.end - startAndEnd.start + 1)" :key="_" :class='{ active:index + startAndEnd.start==pageNo }' @click='alterPageNo(index+startAndEnd.start)'>{{index+startAndEnd.start}}</button>
    <!-- 判断一下，如果结束页和总页数相差1个，也不该显示 -->
    <button v-show="startAndEnd.end < totalPage -1">...</button>
    <!-- 判断一下，如果结束页和总页数一样，则总页数不该显示 -->
    <button v-show="startAndEnd.end < totalPage">总页数:{{totalPage}}</button>
    <button @click='alterPageNo(pageNo+1)' :disabled="pageNo===totalPage">下一页</button>
    <span>共 {{total}} 条</span>
  </div>
</template>

<script>
export default {
  name:'Pagination',
  // 接收从父组件传来的数据  total总条数  pageSize一页要显示几条  continues连贯页  pageNo当前页
  // changePageNo更改当前页（点谁谁高亮）活动属性方式传参要在props接收传过来的活动属性
  props:['total','pageSize','continues','pageNo',],
  computed:{
    // 1. 计算总页码数
    totalPage(){
      // 先解构出要的数据
      const {total,pageSize} = this
      return Math.ceil(total/pageSize)
    },
    // 2. 计算起始结束页
    startAndEnd(){
      const {pageNo,continues,totalPage} = this
      let start, end//定义变量
    // 如果连续页码数量大于总页码数量?
    if (continues>totalPage) {
      start = 1
      end = totalPage
    } else {
      // parseInt:将字符串转换成整数
      start = pageNo - parseInt(continues/2)
      end = pageNo + parseInt(continues/2)
      //  如果起始页码小于1？
      if (start<1) {
        start = 1; // 起始页不能为负，
        end = continues; // 结束页就是continues
      }if (end>totalPage) {//如果结束页码超出了总页码？
        end = totalPage // 结束页不能超过总页码
        start = totalPage - continues + 1;  // 开始页要从后往前算
      }
    }
    return {start, end}  
    },
  },
  methods:{
    //点谁谁高亮
    alterPageNo(newpageno){
      // this.changePageNo(newpageno)活动属性方式传参
      this.$emit('change-pageNo',newpageno)//自定义事件的方式来传参
    }
  }
}
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #c81623;
      color: #fff;
    }
  }
  span {
    display: inline-block;
    line-height: 28px;
    font-size: 14px;
    color: gray;
    vertical-align: middle;
  }
}
</style>